<template>
    <div class="lyricBox flex align-center ml20">
        <button @click="changeState=!changeState">歌词</button>
        <div class="listlyric" v-show="changeState">
            <div :style="{top:top+'px'}">
                <p v-for="item in lyric" :key="item" :data-time='item | splitTime'>
                    {{item | splitLyric}}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import {getLyric} from './../api'
export default {
    data() {
        return {
            changeState:true,
            lyric:'',
            top:0
        }
    },
    props:['id','currentTime'],
    filters:{
        splitLyric(oldVal){//过滤器
            // console.log(oldVal);
            var val=oldVal.replace(/\[\d*:\d*\.\d*\](.*)/,'$1')
            // console.log(val);
            return val
        },
        splitTime(oldVal){
            var val=oldVal.replace(/\[(\d*:\d*\.\d*)\](.*)/,'$1').split('.')[0]
            return val
        }
    },
    computed:{
        formatTime(){
            return function(item){
                var val=item.replace(/\[(\d*:\d*\.\d*)\](.*)/,'$1').split('.')[0]//04:47
                // console.log(val);//04:47
                val=val.split(':')
                // console.log(val[0]*60+val[1]*1);//291
                val=val[0]*60+val[1]*1

                var t=this.currentTime.split(':')// 当前播放时间
                // console.log(t[0]*60+Number(t[1]),val);
                // return Number(t[1]).toFixed()
                
            }
        }
    },
    watch:{
        id(){
            console.log('变了');
            this.getLyric()
        }
    },
    mounted(){
        this.getLyric()
    },
    updated(){
        // https://www.jianshu.com/p/cb040a843a41
        // Vue实现歌词滚动效果（lyric-parser）
        setTimeout(()=>{
            this.top-=10
            console.log(this.top);
        },2000)
    },

    methods:{
        getLyric(){
            // request({url:`/lyric?id=${this.id}`}).then(res=>{
            getLyric(this.id).then(res=>{
                // console.log(res);
                this.lyric=res.data.lrc.lyric.split(/\n/)
                // console.log(this.lyric);
            })
        }
    }
};
</script>

<style lang="scss" scope>
    .lyricBox{
        position: relative;
    }
    .listlyric{
        width: 300px;
        height: 200px;
        padding: 10px;
        position: fixed;
        bottom: 53px;
        overflow-y: scroll;
        background: #000;
        div{
            transition: 0.3s;
            position: absolute;
        }
    }
    .listlyric p {
        color: #989898;
        word-wrap: break-word;
        text-align: center;
        line-height: 32px;
        height: auto !important;
        height: 32px;
        min-height: 32px;
        -webkit-transition: color 0.7s linear;
        -moz-transition: color 0.7s linear;
        -o-transition: color 0.7s linear;
        transition: color 0.7s linear;
    }
    .listlyric p.z-sel {
        color: #fff;
        font-size: 14px;
        transition: color 0.7s linear;
    }
</style>